<html lang="zh">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta http-equiv="x-ua-compatible" content="chrome-1 ie=edge">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, width=device-width">
        <title>扫码登录</title>
        <script src="https://g.alicdn.com/dingding/h5-dingtalk-login/0.21.0/ddlogin.js"></script>
        <style>
        /* STEP2：指定这个包裹容器元素的CSS样式，尤其注意宽高的设置 */
        .dingtalk {
          width: 300px;
          height: 300px;
        }
      </style>
    </head>

  <body>
    <div id="dingtalk" style="text-align: center;"></div>
  </body>
  <script>
    // STEP3：在需要的时候，调用 window.DTFrameLogin 方法构造登录二维码，并处理登录成功或失败的回调。
    // 站点url
    const siteUrl = "https://ms.gdyngl.com"
    // const siteUrl = "http://192.168.18.55:8000";

    // 钉钉appKey
    const appKey = 'dingqmjaygfoyfxp6ls8'

    // 构造跳转链接
    const redirect_uri = siteUrl + "/autoLogin/dingTalk"

    window.DTFrameLogin(
      {
        id: 'dingtalk',
        width: 300,
        height: 300,
      },
      {
        redirect_uri: encodeURIComponent(redirect_uri),
        client_id: appKey,
        scope: 'openid',
        response_type: 'code',
        state: 'yndcode',
        prompt: 'consent',
      },
      (loginResult) => {
        const {redirectUrl, authCode, state} = loginResult;
        // 这里可以直接进行重定向
        window.location.href = redirectUrl;
        // 也可以在不跳转页面的情况下，使用code进行授权
        console.log(authCode);
      },
      (errorMsg) => {
        // 这里一般需要展示登录失败的具体原因
        alert(`Login Error: ${errorMsg}`);
      },
    );
  </script>
</html>


